<template>
  <div class="statisticsWhole">
    <a-form :form="form" class="systemForm" v-bind="formItemLayout">
      <a-form-item class="filter_time">
        <div class="mainPart_filter_time">
          <span class="one"></span>
          <span class="two"></span>
          <a-range-picker @change="onChange"></a-range-picker>
        </div>
      </a-form-item>

      <a-form-item class="administrative" label=" 科室 ">
        <a-select class="sitemore" mode="multiple" placeholder="请选择" @change="departVal">
          <a-select-option
              v-for="(item, index) in departList"
              :key="index"
              :value="item"
          >{{ item }}
          </a-select-option
          >
        </a-select>
      </a-form-item>

      <a-form-item class="administrative1" label=" 手术间 ">
        <a-select class="sitemore"
                  mode="multiple"
                  placeholder="请选择"
                  @change="operationRoomVal"
        >
          <a-select-option
              v-for="(item, index) in operationRoomList"
              :key="index"
              :value="item"
          >{{ item }}
          </a-select-option
          >
        </a-select>
      </a-form-item>

      <a-form-item class="but">
        <a-button :class="search" @click="onSearch"> 搜索</a-button>
        <a-button :class="butt" @click="onOperationExport">
          <img
              alt
              src="../../../images/home-details/buttonInner-icon/icon-download.png"
          />
          导出Excel
        </a-button>
      </a-form-item>
    </a-form>
    <div class="content">
      <!-- 各手术间手术台数汇总-按时间 -->
      <div class="content_">
        <div class="title">
          各手术间手术台数汇总-
          <span :class="title_according">按时间</span>
        </div>
        <div class="center">
          <div :class="tab">
            <a-radio-group :value="size" @change="handleSizeChange">
              <a-radio-button
                  style="
                  width: 50px;
                  height: 26px;
                  border-radius: 6px 0px 0px 6px;
                "
                  value="0"
              >日
              </a-radio-button
              >
              <a-radio-button
                  class="bor"
                  style="width: 50px; height: 26px"
                  value="1"
              >周
              </a-radio-button
              >
              <a-radio-button
                  class="bor"
                  style="width: 50px; height: 26px"
                  value="2"
              >月
              </a-radio-button
              >
              <a-radio-button
                  class="bor"
                  style="
                  width: 50px;
                  height: 26px;
                  border-radius: 0px 6px 6px 0px;
                "
                  value="3"
              >年
              </a-radio-button
              >
            </a-radio-group>
          </div>
          <div v-if="seketeDateShow" class="seleteDate">
            <el-date-picker
                v-model="selectDateStr"
                :clearable="false"
                placeholder="开始日期"
                type="date"
                @change="selectDate"
            >
            </el-date-picker>
            <span>~</span>
            <el-date-picker
                v-model="selectDateStr1"
                :clearable="false"
                placeholder="结束日期"
                type="date"
                @change="selectDate1"
            >
            </el-date-picker>
            <a-icon
                v-if="sEmptyShow"
                class="seleteEmpty"
                theme="filled"
                type="close-circle"
                @click="sEmpty"
            />
          </div>
          <div v-if="seketeYearShow" class="seleteDate">
            <el-date-picker
                v-model="selectYearStr"
                :clearable="false"
                placeholder="开始年份"
                type="year"
                @change="selectYear"
            >
            </el-date-picker>
            <span>~</span>
            <el-date-picker
                v-model="selectYearStr1"
                :clearable="false"
                placeholder="结束年份"
                type="year"
                @change="selectYear1"
            >
            </el-date-picker>
            <a-icon
                v-if="sEmptyShow"
                class="seleteEmpty"
                theme="filled"
                type="close-circle"
                @click="sEmpty"
            />
          </div>
          <div v-if="seketemonthShow" class="seleteDate">
            <el-date-picker
                v-model="selectmonthStr"
                :clearable="false"
                placeholder="开始月份"
                type="month"
                @change="selectmonth"
            >
            </el-date-picker>
            <span>~</span>
            <el-date-picker
                v-model="selectmonthStr1"
                :clearable="false"
                placeholder="结束月份"
                type="month"
                @change="selectmonth1"
            >
            </el-date-picker>
            <a-icon
                v-if="sEmptyShow"
                class="seleteEmpty"
                theme="filled"
                type="close-circle"
                @click="sEmpty"
            />
          </div>
          <div v-if="seketeweekShow" class="seleteDate">
            <el-date-picker
                v-model="selectweekStr"
                :clearable="false"
                format="yyyy-WW周"
                placeholder="开始星期"
                type="week"
                @change="selectweek"
            >
            </el-date-picker>
            <span>~</span>
            <el-date-picker
                v-model="selectweekStr1"
                :clearable="false"
                format="yyyy-WW周"
                placeholder="结束星期"
                type="week"
                @change="selectweek1"
            >
            </el-date-picker>
            <a-icon
                v-if="sEmptyShow"
                class="seleteEmpty"
                theme="filled"
                type="close-circle"
                @click="sEmpty"
            />
          </div>
        </div>

        <div id="byTime"></div>
      </div>
      <!-- 各科室手术台数汇总-按总量 -->
      <div class="content_">
        <div class="title">
          各科室手术台数汇总-
          <span :class="title_according">按总量</span>
        </div>
        <div id="byGross"></div>
      </div>
      <!-- 男性患者手术台数与女性患者手术台数汇总-按总量 -->
      <div class="content_">
        <div class="title">
          男性患者手术台数与女性患者手术台数汇总-
          <span :class="title_according">按总量</span>
        </div>
        <div id="byMenWomenGross"></div>
      </div>
      <!-- 各手术间手术台数汇总-按比例 -->
      <div class="content_">
        <div class="title">
          各手术间手术台数汇总-
          <span :class="title_according">按比例</span>
        </div>
        <div id="byRatio"></div>
      </div>
      <!-- 各科室手术台数汇总-按比例 -->
      <div class="content_">
        <div class="title">
          各科室手术台数汇总-
          <span :class="title_according">按比例</span>
        </div>
        <div id="byDepartmentRatio"></div>
      </div>
      <!-- 男性患者手术台数与女性患者手术台数汇总-按比例 -->
      <div class="content_">
        <div class="title">
          男性患者手术台数与女性患者手术台数汇总-
          <span :class="title_according">按比例</span>
        </div>
        <div id="byMenWomenRatio"></div>
      </div>
    </div>
    <a-alert
        v-if="aAlert"
        banner
        class="aAlertStyle"
        message="结束时间不能小于开始时间"
        type="error"
    />
  </div>
</template>

<script>
import api from "../../api/statistics/statistics.js";
import * as echarts from "echarts";
import moment from "moment";

function color16() {
  //十六进制颜色随机
  let r = Math.floor(Math.random() * 256);
  let g = Math.floor(Math.random() * 256);
  let b = Math.floor(Math.random() * 256);
  let color = "#" + r.toString(16) + g.toString(16) + b.toString(16);
  return color;
}

function randomRgbaColor() {
  //随机生成RGBA颜色
  let r = Math.floor(Math.random() * 256); //随机生成256以内r值
  let g = Math.floor(Math.random() * 256); //随机生成256以内g值
  let b = Math.floor(Math.random() * 256); //随机生成256以内b值
  let alpha = 0.8;
  return `rgba(${r},${g},${b},${alpha})`; //返回rgba(r,g,b,a)格式颜色
}

function randomRgbaColor1() {
  //随机生成RGBA颜色
  let r = Math.floor(Math.random() * 256); //随机生成256以内r值
  let g = Math.floor(Math.random() * 256); //随机生成256以内g值
  let b = Math.floor(Math.random() * 256); //随机生成256以内b值
  let alpha = 0.3;
  return `rgba(${r},${g},${b},${alpha})`; //返回rgba(r,g,b,a)格式颜色
}

function getDay(day) {
  let today = new Date();
  let targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
  today.setTime(targetday_milliseconds); //注意，这行是关键代码
  let tYear = today.getFullYear();
  let tMonth = today.getMonth();
  let tDate = today.getDate();
  let tHours = today.getHours();
  let tMinutes = today.getMinutes();
  let tSeconds = today.getSeconds();
  tMonth = doHandleMonth(tMonth + 1);
  tDate = doHandleMonth(tDate);
  return (
      tYear +
      "-" +
      tMonth +
      "-" +
      tDate +
      " " +
      tHours +
      ":" +
      tMinutes +
      ":" +
      tSeconds
  );
}

function doHandleMonth(month) {
  let m = month;
  if (month.toString().length == 1) {
    m = "0" + month;
  }
  return m;
}

Array.prototype.remove = function (val) {
  let index = this.indexOf(val);
  if (index > -1) {
    this.splice(index, 1);
  }
};
export default {
  data() {
    return {
      formItemLayout: {
        labelCol: {
          xs: {span: 24},
          sm: {span: 8},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16},
        },
      },
      size: "0",
      startTime: "",
      endTime: "",
      // 科室列表
      departList: [],
      // 手术间列表
      operationRoomList: [],
      man: {},
      girl: {},
      departVal1: [],
      operationRoomVal1: [],
      selectDateStr: "",
      selectDateStr1: "",
      selectYearStr: "",
      selectYearStr1: "",
      selectmonthStr: "",
      selectmonthStr1: "",
      selectweekStr: "",
      selectweekStr1: "",
      aAlert: false,
      sEmptyShow: true,
      seketeDateShow: true,
      seketeYearShow: false,
      seketemonthShow: false,
      seketeweekShow: false,
      OperationTimeChartData: {},
      objData: {},
      operationTimeChartShow: true,
      search: "search",
      butt: 'butt',
      tab: 'tab',
      title_according: 'title_according',
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, {name: "time_related_controls"});
  },
  mounted() {
    let _this = this;
    console.log(_this);
    _this.selectDateStr1 = new Date().getTime();
    _this.selectDateStr1 = moment(_this.selectDateStr1).format("YYYY-MM-DD");
    _this.selectDateStr = getDay(-6);
    _this.selectDateStr = moment(_this.selectDateStr).format("YYYY-MM-DD");
    // 科室列表
    this.getDepartList();
    // 手术间列表
    this.getOperationRoomList();
    // 男女手术台数汇总-按总量 请求接口
    this.getSexTimeChart();
    // 科室手术台数汇总-按总量 请求接口
    this.getDepartTimeChart();
    // 男女手术台数汇总-按比例 请求接口
    this.getSexRatioChart();
    // 科室手术台数汇总-按比例 请求接口
    this.getDepartRatioChart();
    // 手术间手术台数汇总-按比例 请求接口
    this.getOperationRoomRatioChart();
    // 手术间手术台数汇总-按时间 请求接口
    this.getOperationTimeChart();
    window.Event.$on("menuLeft", val => {
      _this.menuLeft = val;
      if (_this.menuLeft != "menuDeaDolour") {
        _this.search = 'search';
        _this.butt = 'butt';
        _this.tab = 'tab';
        _this.title_according = 'title_according';
      } else if (_this.menuLeft == "menuDeaDolour") {
        _this.search = 'search1';
        _this.butt = 'butt1';
        _this.tab = 'tab1';
        _this.title_according = 'title_according1';
      }
    });
    // _this.menuLeft1 = _this.$store.state.menuLeft;
    _this.menuLeft1 = sessionStorage.getItem('menuLeft')
    if (_this.menuLeft1 != "menuDeaDolour") {
      _this.search = 'search';
      _this.butt = 'butt';
      _this.tab = 'tab';
      _this.title_according = 'title_according';
    } else if (_this.menuLeft1 == "menuDeaDolour") {
      _this.search = 'search1';
      _this.butt = 'butt1';
      _this.tab = 'tab1';
      _this.title_according = 'title_according1';
    }
  },
  methods: {
    // 导出
    onOperationExport() {
      let _this = this;
      let departList = _this.departVal1;
      let operationRoomList = _this.operationRoomVal1;
      let startTime = _this.startTime;
      let endTime = _this.endTime;
      let type = _this.size;
      let start = "";
      let end = "";
      if (type == 0) {
        start = _this.selectDateStr;
        end = _this.selectDateStr1;
      }
      if (type == 1) {
        start = moment(_this.selectweekStr).format("YYYY-WW") + "周";
        end = moment(_this.selectweekStr1).format("YYYY-WW") + "周";
      }
      if (type == 2) {
        start = _this.selectmonthStr;
        end = _this.selectmonthStr1;
      }
      if (type == 3) {
        start = _this.selectYearStr;
        end = _this.selectYearStr1;
      }
      let dataObj = {
        departList: departList,
        operationRoomList: operationRoomList,
        startTime: startTime,
        endTime: endTime,
        type: type,
        start: start,
        end: end,
      };
      api.OperationExport(null, dataObj).then((res) => {
        let getTime = new Date().getTime();
        getTime = moment(getTime).format("YYYYMMDDHHMMSS");
        const blob = new Blob([res], {
          type: "application/vnd.ms-excel",
        });
        const objectUrl = URL.createObjectURL(blob);
        const a = document.createElement("a");
        a.href = objectUrl;
        a.download = "统计分析_" + getTime + ".xls";
        a.click();
      });
    },
    // 搜索
    onSearch() {
      let _this = this;
      // 男女手术台数汇总-按总量 请求接口
      _this.getSexTimeChart(
          _this.departVal1,
          _this.operationRoomVal1,
          _this.startTime,
          _this.endTime
      );
      // 科室手术台数汇总-按总量 请求接口
      _this.getDepartTimeChart(
          _this.departVal1,
          _this.operationRoomVal1,
          _this.startTime,
          _this.endTime
      );
      // 男女手术台数汇总-按比例 请求接口
      _this.getSexRatioChart(
          _this.departVal1,
          _this.operationRoomVal1,
          _this.startTime,
          _this.endTime
      );
      // 科室手术台数汇总-按比例 请求接口
      _this.getDepartRatioChart(
          _this.departVal1,
          _this.operationRoomVal1,
          _this.startTime,
          _this.endTime
      );
      // 手术间手术台数汇总-按比例 请求接口
      _this.getOperationRoomRatioChart(
          _this.departVal1,
          _this.operationRoomVal1,
          _this.startTime,
          _this.endTime
      );
      // 手术间手术台数汇总-按时间 请求接口
      _this.getOperationTimeChart(
          _this.departVal1,
          _this.operationRoomVal1,
          _this.startTime,
          _this.endTime
      );
    },
    handleSizeChange(e) {
      let _this = this;
      _this.size = e.target.value;
      _this.getOperationTimeChart();
      if (_this.size == 0) {
        _this.seketeDateShow = true;
        _this.selectYearStr = "";
        _this.selectYearStr1 = "";
        _this.selectmonthStr = "";
        _this.selectmonthStr1 = "";
        _this.selectweekStr = "";
        _this.selectweekStr1 = "";
      } else {
        _this.seketeDateShow = false;
      }
      if (_this.size == 1) {
        _this.seketeweekShow = true;
        _this.selectYearStr = "";
        _this.selectYearStr1 = "";
        _this.selectmonthStr = "";
        _this.selectmonthStr1 = "";
        _this.selectDateStr = "";
        _this.selectDateStr1 = "";
      } else {
        _this.seketeweekShow = false;
      }
      if (_this.size == 2) {
        _this.seketemonthShow = true;
        _this.selectYearStr = "";
        _this.selectYearStr1 = "";
        _this.selectweekStr = "";
        _this.selectweekStr1 = "";
        _this.selectDateStr = "";
        _this.selectDateStr1 = "";
      } else {
        _this.seketemonthShow = false;
      }
      if (_this.size == 3) {
        _this.seketeYearShow = true;
        _this.selectmonthStr = "";
        _this.selectmonthStr1 = "";
        _this.selectweekStr = "";
        _this.selectweekStr1 = "";
        _this.selectDateStr = "";
        _this.selectDateStr1 = "";
      } else {
        _this.seketeYearShow = false;
      }
    },
    // 清空
    sEmpty() {
      this.selectYearStr = "";
      this.selectYearStr1 = "";
      this.selectmonthStr = "";
      this.selectmonthStr1 = "";
      this.selectweekStr = "";
      this.selectweekStr1 = "";
      this.selectDateStr = "";
      this.selectDateStr1 = "";
    },
    // 开始日期
    selectDate(e) {
      let _this = this;
      _this.selectDateStr = moment(e).format("YYYY-MM-DD");
      _this.getOperationTimeChart();
    },
    // 结束日期
    selectDate1(e) {
      let _this = this;
      _this.selectDateStr1 = moment(e).format("YYYY-MM-DD");
      if (this.selectDateStr1 < _this.selectDateStr) {
        _this.aAlert = true;
        setTimeout(() => {
          _this.aAlert = false;
        }, 1500);
        _this.selectDateStr = "";
        _this.selectDateStr1 = "";
      }
      if (this.selectDateStr1 >= _this.selectDateStr) {
        _this.getOperationTimeChart();
      }
    },
    // 开始年份
    selectYear(e) {
      let _this = this;
      _this.selectYearStr = moment(e).format("YYYY");
      _this.getOperationTimeChart();
    },
    // 结束年份
    selectYear1(e) {
      let _this = this;
      _this.selectYearStr1 = moment(e).format("YYYY");
      if (_this.selectYearStr1 < _this.selectYearStr) {
        _this.aAlert = true;
        setTimeout(() => {
          _this.aAlert = false;
        }, 1500);
        _this.selectYearStr = "";
        _this.selectYearStr1 = "";
      }
      if (this.selectYearStr1 >= _this.selectYearStr) {
        _this.getOperationTimeChart();
      }
    },
    // 开始月份
    selectmonth(e) {
      let _this = this;
      _this.selectmonthStr = moment(e).format("YYYY-MM");
      _this.getOperationTimeChart();
    },
    // 结束月份
    selectmonth1(e) {
      let _this = this;
      _this.selectmonthStr1 = moment(e).format("YYYY-MM");
      if (_this.selectmonthStr1 < _this.selectmonthStr) {
        _this.aAlert = true;
        setTimeout(() => {
          _this.aAlert = false;
        }, 1500);
        _this.selectmonthStr = "";
        _this.selectmonthStr1 = "";
      }
      if (_this.selectmonthStr1 >= _this.selectmonthStr) {
        _this.getOperationTimeChart();
      }
    },
    // 开始星期
    selectweek(e) {
      let _this = this;
      _this.selectweekStr = e;
      console.log(_this.selectweekStr)
      _this.getOperationTimeChart();
    },
    // 结束星期
    selectweek1(e) {
      let _this = this;
      _this.selectweekStr1 = e;
      console.log(_this.selectweekStr1)
      if (_this.selectweekStr1 < _this.selectweekStr) {
        _this.aAlert = true;
        setTimeout(() => {
          _this.aAlert = false;
        }, 1500);
        _this.selectweekStr = "";
        _this.selectweekStr1 = "";
      }
      if (_this.selectweekStr1 >= _this.selectweekStr) {
        _this.getOperationTimeChart();
      }
    },
    // 手术间手术台数汇总-按时间 请求接口
    getOperationTimeChart(departList, operationRoomList, startTime, endTime) {
      let _this = this;
      let obj = {
        start: "",
        end: "",
      };
      if (_this.size == 0 && _this.selectDateStr && _this.selectDateStr1) {
        obj.start = _this.selectDateStr;
        obj.end = _this.selectDateStr1;
      }
      if (_this.size == 1 && _this.selectweekStr && _this.selectweekStr1) {
        obj.start = moment(_this.selectweekStr).format("YYYY-WW") + "周";
        obj.end = moment(_this.selectweekStr1).format("YYYY-WW") + "周";
        console.log(obj)
      }
      if (_this.size == 2 && _this.selectmonthStr && _this.selectmonthStr1) {
        obj.start = _this.selectmonthStr;
        obj.end = _this.selectmonthStr1;
      }
      if (_this.size == 3 && _this.selectYearStr && _this.selectYearStr1) {
        obj.start = _this.selectYearStr;
        obj.end = _this.selectYearStr1;
      }
      if (obj.start != "" && obj.end != "") {
        api
            .getOperationTimeChart(null, {
              type: _this.size,
              start: obj.start,
              end: obj.end,
              departList: departList,
              operationRoomList: operationRoomList,
              startTime: startTime,
              endTime: endTime,
            })
            .then((res) => {
              if (res.code == 200) {
                let dateList = [];
                let operationRoomNameList = [];
                let nameNumList = [];
                dateList = res.data.dateList;
                operationRoomNameList = res.data.operationRoomNameList;
                nameNumList = res.data.nameNumList;
                nameNumList.forEach((e) => {
                  e.name = e.operationRoomName;
                  e.data = e.numList;
                  e.smooth = true;
                  e.type = "line";
                  e.areaStyle = {};
                  delete e.operationRoomName;
                  delete e.numList;
                });
                // 各手术间手术台数汇总-按时间
                this.byTimeEcharts(dateList, nameNumList);
              }
            });
      }
    },
    // 手术间手术台数汇总-按比例 请求接口
    getOperationRoomRatioChart(
        departList,
        operationRoomList,
        startTime,
        endTime
    ) {
      api
          .getOperationRoomRatioChart(null, {
            departList: departList,
            operationRoomList: operationRoomList,
            startTime: startTime,
            endTime: endTime,
          })
          .then((res) => {
            if (res.code == 200) {
              let data = [];
              res.data.forEach((element) => {
                element.name = element.operationRoomName;
                element.value = element.num;
                delete element.operationRoomName;
                delete element.num;
                data.push(element);
              });
              // 各手术间手术台数汇总-按比例
              this.byRatioEcharts(data);
            }
          });
    },
    // 科室手术台数汇总-按比例 请求接口
    getDepartRatioChart(departList, operationRoomList, startTime, endTime) {
      api
          .getDepartRatioChart(null, {
            departList: departList,
            operationRoomList: operationRoomList,
            startTime: startTime,
            endTime: endTime,
          })
          .then((res) => {
            if (res.code == 200) {
              let data = [];
              res.data.forEach((element) => {
                element.name = element.departmentName;
                element.value = element.num;
                delete element.departmentName;
                delete element.num;
                data.push(element);
              });
              // 各科室手术台数汇总-按比例
              this.byDepartmentRatioEcharts(data);
            }
          });
    },
    // 科室手术台数汇总-按总量 请求接口
    getDepartTimeChart(departList, operationRoomList, startTime, endTime) {
      let _this = this;
      api
          .getDepartTimeChart(null, {
            departList: departList,
            operationRoomList: operationRoomList,
            startTime: startTime,
            endTime: endTime,
          })
          .then((res) => {
            let arr1 = [];
            res.data.forEach((element) => {
              element.name = element.departmentName;
              element.value = element.num;
              //element.itemStyle= {color: color16()},
              arr1.push(element.departmentName);
              delete element.departmentName;
              delete element.num;
            });
            // 各科室手术台数汇总-按总量
            this.byGrossEcharts(arr1, res.data);
          });
    },
    // 男女手术台数汇总-按比例 请求接口
    getSexRatioChart(departList, operationRoomList, startTime, endTime) {
      api
          .getSexRatioChart(null, {
            departList: departList,
            operationRoomList: operationRoomList,
            startTime: startTime,
            endTime: endTime,
          })
          .then((res) => {
            if (res.code == 200) {
              let arr1 = [];
              for (let i = 0; i < res.data.length; i++) {
                if (res.data[i].sex == 0) {
                  res.data[i].sex = "男";
                  res.data[i].name = res.data[i].sex;
                  res.data[i].value = res.data[i].num;
                  delete res.data[i].sex;
                  delete res.data[i].num;
                  arr1.push(res.data[i]);
                }
                if (res.data[i].sex == 1) {
                  res.data[i].sex = "女";
                  res.data[i].name = res.data[i].sex;
                  res.data[i].value = res.data[i].num;
                  delete res.data[i].sex;
                  delete res.data[i].num;
                  arr1.push(res.data[i]);
                }
              }
              // 男性患者手术台数与女性患者手术台数汇总-按比例
              this.byMenWomenRatioEcharts(arr1);
            }
          });
    },
    // 男女手术台数汇总-按总量 请求接口
    getSexTimeChart(departList, operationRoomList, startTime, endTime) {
      let _this = this;
      api
          .getSexTimeChart(null, {
            departList: departList,
            operationRoomList: operationRoomList,
            startTime: startTime,
            endTime: endTime,
          })
          .then((res) => {
            if (res.code == 200) {
              let man = {};
              let girl = {};
              for (let i = 0; i < res.data.length; i++) {
                if (res.data[i].sex == 0) {
                  res.data[i].sex = "男";
                  man = res.data[i];
                }
                if (res.data[i].sex == 1) {
                  res.data[i].sex = "女";
                  girl = res.data[i];
                }
              }
              // 男性患者手术台数与女性患者手术台数汇总-按总量
              _this.byMenWomenGrossEcharts(man, girl);
            }
          });
    },
    // 选择科室
    departVal(value) {
      this.departVal1 = value;
    },
    // 选择手术间
    operationRoomVal(value) {
      this.operationRoomVal1 = value;
    },
    // 科室列表
    getDepartList() {
      let _this = this;
      api.getDepartList().then((res) => {
        if (res.code == 200) {
          res.data.remove(null);
          _this.departList = res.data;
        }
      });
    },
    // 手术间列表
    getOperationRoomList() {
      let _this = this;
      api.getOperationRoomList().then((res) => {
        if (res.code == 200) {
          _this.operationRoomList = res.data;
        }
      });
    },
    // 时间
    onChange(dates, dateStrings) {
      if (dates.length != 0) {
        this.startTime = this.$dataMethod.dateFormat("YY-mm-dd", dates[0]._d);
        this.endTime = this.$dataMethod.dateFormat("YY-mm-dd", dates[1]._d);
      } else if (dates.length == 0) {
        this.startTime = "";
        this.endTime = "";
      }
    },
    // 各手术间手术台数汇总-按时间
    byTimeEcharts(dateList, nameNumList) {
      let chartDom = document.getElementById("byTime");
      let myChart = echarts.init(chartDom);
      let option = {
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: dateList,
          axisLabel: {
            interval: 0,
            formatter: function (value) {
              let str = "";
              let num = 5; //每行显示字数
              let valLength = value.length; //该项x轴字数
              let rowNum = Math.ceil(valLength / num); // 行数

              if (rowNum > 1) {
                for (let i = 0; i < rowNum; i++) {
                  let temp = "";
                  let start = i * num;
                  let end = start + num;

                  temp = value.substring(start, end) + "\n";
                  str += temp;
                }
                return str;
              } else {
                return value;
              }
            },
          },
        },
        yAxis: {
          type: "value",
        },
        series: nameNumList,
        // dataZoom:{
        //   type:"slider",
        //   show:true,
        //   realtime:true, //拖动滚动条时是否动态的更新图表数据
        //   xAxisIndex:[0],//表示x轴折叠
        //   height:5,//滚动条高度
        //   start:1,//滚动条开始位置（共100等份）
        //   end:10//结束位置（共100等份）
        // }
      };
      let areaStyle1 = {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "rgba(50, 177, 108,0.8)",
          },
          {
            offset: 1,
            color: "rgba(50, 177, 108,0.3)",
          },
        ]),
      };
      let areaStyle2 = {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "rgba(50, 177, 108,0.8)",
          },
          {
            offset: 1,
            color: "rgba(50, 177, 108,0.3)",
          },
        ]),
      };
      let areaStyle3 = {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "rgba(213,72,120,0.8)",
          },
          {
            offset: 1,
            color: "rgba(213,72,120,0.3)",
          },
        ]),
      };
      let areaStyle4 = {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: randomRgbaColor(),
          },
          {
            offset: 1,
            color: randomRgbaColor1(),
          },
        ]),
      };
      if (option.series.length >= 1) {
        option.series[0].areaStyle = areaStyle1;
      }
      if (option.series.length >= 2) {
        option.series[1].areaStyle = areaStyle2;
      }
      if (option.series.length >= 3) {
        option.series[2].areaStyle = areaStyle3;
      }
      if (option.series.length >= 4) {
        option.series[2].areaStyle = areaStyle4;
      }
      option && myChart.setOption(option);
    },
    // 各科室手术台数汇总-按总量
    byGrossEcharts(arr, data) {
      let chartDom = document.getElementById("byGross");
      let myChart = echarts.init(chartDom);
      let colorList = [
        "#B870BA",
        "#F1F182",
        "#358DD7",
        "#55B9B7",
        "#38ADD0",
        "#AF8CF5",
        "#7CD3F0",
        "#34B549",
        "#F4AC77",
        "#88ABDA",
      ];
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "1%",
          top: "3%",
          containLabel: true,
        },
        height: 300,
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
          data: arr,
        },
        series: [
          {
            data: data,
            type: "bar",
            itemStyle: {
              // 定制显示（按顺序）,实现不同颜色的柱体
              color: (params) => {
                return colorList[params.dataIndex];
              },
            },
          },
        ],
      };
      option && myChart.setOption(option);
    },
    // 男性患者手术台数与女性患者手术台数汇总-按总量
    byMenWomenGrossEcharts(man, girl) {
      let chartDom = document.getElementById("byMenWomenGross");
      let myChart = echarts.init(chartDom);
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "1%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
          data: ["女", "男"],
        },
        series: [
          {
            data: [
              {
                value: girl.num,
                name: girl.sex,
                itemStyle: {
                  color: "#B870BA",
                },
              },
              {
                value: man.num,
                name: man.sex,
                itemStyle: {
                  color: "#55B9B7",
                },
              },
            ],
            type: "bar",
          },
        ],
      };
      option && myChart.setOption(option);
    },
    // 各手术间手术台数汇总-按比例
    byRatioEcharts(data) {
      let chartDom = document.getElementById("byRatio");
      let myChart = echarts.init(chartDom);
      let option;
      option = {
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            type: "pie",
            radius: [40, 120],
            center: ["50%", "50%"],
            roseType: "area",
            data: data,
          },
        ],
      };
      option && myChart.setOption(option);
    },
    // 各科室手术台数汇总-按比例
    byDepartmentRatioEcharts(data) {
      let chartDom = document.getElementById("byDepartmentRatio");
      let myChart = echarts.init(chartDom);
      let option;
      option = {
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            type: "pie",
            radius: [40, 120],
            center: ["50%", "50%"],
            roseType: "area",
            data: data,
          },
        ],
      };
      option && myChart.setOption(option);
    },
    // 男性患者手术台数与女性患者手术台数汇总-按比例
    byMenWomenRatioEcharts(arr1) {
      let _this = this;
      let chartDom = document.getElementById("byMenWomenRatio");
      let myChart = echarts.init(chartDom);
      let option;
      option = {
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            type: "pie",
            radius: [40, 120],
            center: ["50%", "50%"],
            roseType: "area",
            data: arr1,
          },
        ],
      };
      option && myChart.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
.whole {
  .systemForm {
    margin: 20px 0 20px 25px;
    height: 36px;

    .filter_time {
      float: left;
    }

    .mainPart_filter_time {
      width: 260px;
      height: 36px;
      display: flex;
      position: relative;

      .ant-calendar-picker-input.ant-input {
        width: 260px !important;
      }

      .one {
        width: 14px;
        height: 16px;
        background-image: url(../../../images/home-showAll/icon-date.png);
        background-size: cover !important;
        background-size: 100% 100% !important;
        position: absolute;
        left: 41%;
        top: 25%;
      }

      .two {
        width: 14px;
        height: 16px;
        background-image: url(../../../images/home-showAll/icon-date.png);
        background-size: cover !important;
        background-size: 100% 100% !important;
        position: absolute;
        right: 5%;
        top: 25%;
      }

      .startTimeApply {
        position: absolute;
        top: 20%;
        left: 12%;
        color: rgb(128, 128, 128);
      }

      .endTimeApply {
        position: absolute;
        top: 20%;
        right: 12%;
        color: rgb(128, 128, 128);
      }
    }

    .but {
      float: left;
      left: 104px;
      width: 340px;
      height: 36px;
      position: relative;

      .butt, .butt1 {
        position: absolute;
        right: -150px;
      }

      .butt.ant-btn {
        width: 140px;
        height: 36px;
        border-radius: 18px;
        font-size: 16px;
        color: #ffffff;
        background: #0078b6;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 18px;
          height: 18px;
          margin-right: 10px;
        }
      }

      .butt1.ant-btn {
        width: 140px;
        height: 36px;
        border-radius: 18px;
        font-size: 16px;
        color: #ffffff;
        background: #2091bd;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 18px;
          height: 18px;
          margin-right: 10px;
        }
      }

      .search {
        width: 100px;
        height: 36px;
        position: absolute;
        left: -150px;
        border-radius: 18px;
        font-size: 16px;
        color: #ffffff;
        background: #0078b6;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .search1 {
        width: 100px;
        height: 36px;
        position: absolute;
        left: -150px;
        border-radius: 18px;
        font-size: 16px;
        color: #ffffff;
        background: #2091bd;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  .content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    overflow-x: hidden;

    .content_ {
      width: 500px;
      height: 418px;
      background: rgba(255, 255, 255, 0.6);
      border: 1px solid #c4d7e1;
      border-radius: 6px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      margin: 0 0 30px 30px;
      position: relative;

      .title {
        width: 100%;
        height: 50px;
        font-size: 16px;
        font-weight: bold;
        color: #4d4d4d;
        line-height: 50px;
        display: flex;
        margin-left: 30px;

        .title_according {
          color: #0078b6;
        }

        .title_according1 {
          color: #2091bd;
        }
      }

      .center {
        width: 95%;
        height: 35px;
        position: absolute;
        top: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .tab, .tab1 {
          z-index: 1;
          height: 30px;
        }

        .seleteDate {
          width: 235px;
          height: 35px;
          border: 1px solid #cdcdcd;
          border-radius: 8px;
          position: relative;
          display: flex;
          align-items: center;

          span {
            width: 10px;
            position: absolute;
            left: 50%;
            transform: translate(-10px);
            color: #707070;
          }

          .seleteEmpty {
            position: absolute;
            right: 2px;
            color: #8a8a8a;
            cursor: pointer;
            z-index: 11;
          }
        }
      }

      #byTime,
      #byGross,
      #byMenWomenGross,
      #byRatio,
      #byDepartmentRatio,
      #byMenWomenRatio {
        width: 460px;
        height: 367px;
        border-top: 1px solid #e7e7e7;
        display: flex;
        justify-content: center;
      }
    }
  }

  .statisticsWhole .administrative,
  .statisticsWhole .administrative1 {
    /deep/ ul {
      display: flex;
      flex-wrap: nowrap;
      // overflow: hidden;
      // float: left;
    }

    /deep/ .ant-select-selection--multiple {
      width: 100% !important;
      height: 32px !important;

      /deep/ .ant-select-selection__rendered {
        height: 100% !important;

        ul {
          width: 100% !important;
          height: 110% !important;
          overflow-y: hidden !important;
          display: -webkit-box !important;

          &::-webkit-scrollbar {
            width: 5px !important;
            height: 5px !important;
          }

          &::-webkit-scrollbar-track {
            z-index: 100 !important;
            background-color: #dedede !important;
            -webkit-border-radius: 1em !important;
            -moz-border-radius: 1em !important;
            border-radius: 1em !important;
          }

          &::-webkit-scrollbar-thumb {
            background-color: #bfbfbf !important;
            -webkit-border-radius: 1em !important;
            -moz-border-radius: 1em !important;
            border-radius: 1em !important;
          }

          & > li {
            box-sizing: border-box !important;
            float: unset !important;
          }
        }
      }
    }
  }

  .aAlertStyle {
    width: 400px;
    position: fixed;
    left: 50%;
    top: 100px;
    transform: translate(-100px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
  }
}
</style>
<style>
.statisticsWhole .mainPart_filter_time .ant-calendar-picker-input {
  border: none !important;
  background: none !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
}

.statisticsWhole .mainPart_filter_time .ant-calendar-range-picker-input {
  height: 34px !important;
  line-height: 34px !important;
  border-bottom: solid 1px #9d9d9d !important;
}

.statisticsWhole .mainPart_filter_time .ant-calendar-picker-clear,
.statisticsWhole .ant-calendar-picker-icon {
  background-color: none !important;
  position: absolute !important;
  left: 50% !important;
  width: 6px !important;
  height: 1px !important;
  background: #000 !important;
  transform: translate(-3px) !important;
  top: 70% !important;
}

.statisticsWhole .mainPart_filter_time .ant-calendar-range-picker-separator {
  color: rgba(255, 255, 255, 0) !important;
}

.statisticsWhole
.mainPart_filter_time.anticon.anticon-close-circle.ant-calendar-picker-clear {
  position: absolute !important;
  left: 98% !important;
  top: 50% !important;
  border: none !important;
  background: none !important;
}

.statisticsWhole .administrative {
  width: 220px !important;
  /* height: 34px !important; */
  display: flex !important;
  float: left !important;
  left: 40px !important;
  overflow: hidden !important;
}

.statisticsWhole .administrative1 {
  width: 220px !important;
  height: 34px !important;
  display: flex !important;
  float: left !important;
  left: 40px !important;
  margin-left: 30px !important;
}

.statisticsWhole
.administrative
.ant-col.ant-col-xs-24.ant-col-sm-16.ant-form-item-control-wrapper {
  width: 187px !important;
}

.statisticsWhole
.administrative1
.ant-col.ant-col-xs-24.ant-col-sm-16.ant-form-item-control-wrapper {
  width: 187px !important;
}

.statisticsWhole
.administrative1
.ant-col.ant-col-xs-24.ant-col-sm-8.ant-form-item-label {
  width: 47px !important;
  font-size: 16px !important;
  color: #4d4d4d !important;
}

.statisticsWhole
.administrative
.ant-col.ant-col-xs-24.ant-col-sm-8.ant-form-item-label {
  width: 32px !important;
  font-size: 16px !important;
  color: #4d4d4d !important;
}

/* .statisticsWhole .administrative .ant-select-enabled svg,
.statisticsWhole .administrative1 .ant-select-enabled svg {
  background-image: url(../../../images/home-showAll/fold.png) !important;
  background-size: cover !important;
  background-size: 100% 100% !important;
  width: 12px !important;
  height: 8px !important;
} */
.statisticsWhole .administrative .ant-select-selection,
.statisticsWhole .administrative1 .ant-select-selection {
  background: none !important;
  border: none !important;
  border-bottom: 1px solid #9d9d9d !important;
  border-radius: 0 !important;
}

.statisticsWhole .tab .ant-radio-button-wrapper, .statisticsWhole .tab1 .ant-radio-button-wrapper {
  width: 50px !important;
}

.statisticsWhole .tab .ant-radio-button-wrapper {
  font-size: 14px !important;
  color: #0078b6 !important;
  background: rgba(255, 255, 255, 0.5) !important;
  border: 1px solid #0078b6 !important;
  line-height: 30px !important;
  height: 30px !important;
}

.statisticsWhole .tab1 .ant-radio-button-wrapper {
  font-size: 14px !important;
  color: #2091bd !important;
  background: rgba(255, 255, 255, 0.5) !important;
  border: 1px solid #2091bd !important;
  line-height: 30px !important;
  height: 30px !important;
}

.statisticsWhole .bor.ant-radio-button-wrapper {
  border-left: 0 !important;
}

.statisticsWhole .tab .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
  background: #0078b6 !important;
  color: #fff !important;
}

.statisticsWhole .tab1 .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
  background: #2091bd !important;
  color: #fff !important;
}

.statisticsWhole .ant-radio-button-wrapper:not(:first-child)::before {
  background: none !important;
}

.statisticsWhole .systemForm .mainPart_filter_time[data-v-66f833c0] {
  position: relative !important;
}

.statisticsWhole
.systemForm
.mainPart_filter_time[data-v-66f833c0]
.anticon
svg {
  position: absolute !important;
  right: -128px !important;
  top: -6px !important;
}

.statisticsWhole .seleteDate .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 47% !important;
  z-index: 10 !important;
}

.statisticsWhole .seleteDate .el-input--suffix .el-input__inner {
  padding-right: 0 !important;
  border: none !important;
  background: none !important;
}

.statisticsWhole .ant-select-selection--multiple .ant-select-selection__rendered {
  height: 100% !important;
}
</style>
